/* components */
import QualificationForm from '@src/modules/setting/messageChannel/components/qualification/dialog/form'
import QualificationBaseDialog from '@src/modules/setting/messageChannel/components/qualification/dialog/base'
/* hooks */
import { useDialog } from '@hooks/useDialog'
/* vue */
import { defineComponent, PropType } from 'vue'
/* model */
import { 
  SMSQualificationFormStepEnum, SMSQualificationFormSteps
} from '@src/modules/setting/messageChannel/components/qualification/model/enum'
import { SMSQualificationCompanyFields } from '../model'
import { isBool, isFalsy, SAVE_SUCCESS } from 'pub-bbx-utils'
import MsgModel from '@model/MsgModel'
import { message } from '@src/util/message'
import { getQualificationData, saveQualificationData } from '@src/api/MessageApi'

type QualificationFormComponent = InstanceType<typeof QualificationForm>

enum QualificationFormEditEventEnum {
  CLOSE = 'close',
  SUBMIT = 'submit'
}

export default defineComponent({
  name: 'QualificationFormEdit',
  props: {
    onClose: {
      type: Function
    }
  },
  setup(props, { emit }) {
    
    const { visible: insideVisible, showDialog, hideDialog } = useDialog()
    
    return {
      visible: insideVisible,
      showDialog,
      hideDialog,
    }
    
  },
  data() {
    return {
      step: SMSQualificationFormStepEnum.COMPANY,
      loading: false
    }
  },
  computed: {
    title(): string {
      return '资质认证'
    },
    confirmButtonText(): string {
      
      if (this.isLastStep) {
        return '完成'
      }
      
      return '下一步'
      
    },
    stepIndex(): number {
      return SMSQualificationFormSteps.indexOf(this.step)
    },
    isLastStep(): boolean {
      return this.stepIndex === (SMSQualificationFormSteps.length - 1)
    },
    isFirstStep(): boolean {
      return this.stepIndex === 0
    },
    qualificationFormComponent(): QualificationFormComponent {
      return this.$refs.QualificationForm as QualificationFormComponent
    },
    attrs(): Record<string, any> {
      return {
        directives: [
          {
            name: 'loading',
            value: this.loading
          }
        ]
      }
    }
  },
  methods: {
    emitCloseHandler() {
      this.$emit(QualificationFormEditEventEnum.CLOSE)
    },
    async getQualificationData() {
      try {
        
        this.loading = true
        
        const result = await getQualificationData()
        const isFail = MsgModel.isFail(result)
        if (isFail) {
          message.error(result.message)
          return
        }
        
        const data = MsgModel.getData(result, {}) as Record<string, any> 
        this.initForm(data)
        
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    initStep() {
      this.step = SMSQualificationFormStepEnum.COMPANY
    },
    initForm(value: Record<string, any>) {
      this.qualificationFormComponent.initForm(value)
    },
    openDialog() {
      this.initStep()
      this.getQualificationData()
      this.showDialog()
    },
    onCloseHandler() {
      this.hideDialog()
    },
    async onSubmit() {
      try {

        this.loading = true
        
        const form = this.qualificationFormComponent.buildForm()
      
        const result = await saveQualificationData(form)
        const isFail = MsgModel.isFail(result)
        if (isFail) {
          message.error(result.message)
          return
        }
        
        message.success('提交成功，请等待审核。')
        this.onCloseHandler()
        this.emitCloseHandler()
        
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    async onConfirm() {
      
      const result: SMSQualificationFormStepEnum | boolean | void = await this.qualificationFormComponent.nextStepHandler()
      
      if (isFalsy(result)) {
        console.error('下一步失败')
        return
      }
      
      // 如果是最后一步，返回值是布尔值
      if (isBool(result)) {
        await this.onSubmit()
        this.hideDialog()
        return
      }
      
      this.step = result as SMSQualificationFormStepEnum
    },
    async onPrevStepHandler() {
      
      const result: SMSQualificationFormStepEnum | boolean | void = await this.qualificationFormComponent.prevStepHandler()
      
      if (isFalsy(result)) {
        return
      }
      
      this.step = result as SMSQualificationFormStepEnum
      
    },
    renderPrevStepButton() {
      
      if (this.isFirstStep) {
        return
      }
      
      return (
        <el-button
          onClick={this.onPrevStepHandler}
        >
          上一步
        </el-button>
      )
    }
  },
  render() {
    return (
      <QualificationBaseDialog
        {...this.attrs}
        disabled={this.loading}
        visible={this.visible}
        title={this.title}
        onClose={this.onCloseHandler}
        onConfirm={this.onConfirm}
        confirmText={this.confirmButtonText}
      >

        <div slot="button">
          {this.renderPrevStepButton()}
        </div>

        <QualificationForm
          ref="QualificationForm"
          step={this.step}
        >
        </QualificationForm>
        
      </QualificationBaseDialog>
    )
  }
})